import React, {Component} from 'react';
import styled from 'styled-components';
import {Draggable} from 'react-beautiful-dnd';

const Container = styled.div`
  border: 1px solid lightgrey;
  border-radius: 2px;
  padding: 8px;
  margin-bottom: 8px;
  transition: background-color 0.2s ease;
  background-color: ${props =>
  props.isDragDisabled
    ? 'lightgrey'
    : props.isDragging
    ? 'lightgreen'
    : 'white'};
`;


export default class Task extends Component {
  draggableId = () => {
    return this.props.task.id + '_' + this.props.columns_id + '_' + this.props.index;
  };

  render() {
    // const isDragDisabled = this.props.task.id === 'task-1'
    return (
      <Draggable
        draggableId={this.draggableId()}
        index={this.props.index}
        // isDragDisabled={isDragDisabled}
        disableInteractiveElementBlocking={true}
      >
        {(provided, snapshot, rubric) => {
          return (
            <Container
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              ref={provided.innerRef}
              isDragging={snapshot.isDragging}
            >
              {this.props.task.content}222222
            </Container>
          );
        }}
      </Draggable>
    );
  }
}
